<template>
	<view style="width: 100%;height: 100vh; display: flex;flex-direction: column;justify-content: center;align-items: center;">
		<!-- 滑动控件 -->
		<scroll-view
			:enable-flex="true"
			:show-scrollbar="false"
			@scrolltolower="lower"
			:scroll-y="true"
			style=" display: flex;flex-direction: column; align-items: center;flex: 1;flex-basis: 50vh;"
		>
			<!-- 卡券item -->
			<view :style="item.statu == 0 ? cardAvailable : cardNoAvailable" v-for="(item, index) in cardList" :key="index">
				<text style="width: 654rpx; font-size: 20rpx;margin-top: 24rpx;">{{ item.time }}</text>
				<text style="width: 654rpx; font-size: 36rpx;margin-top: 4rpx;text-align: end;">{{ item.type }}</text>
				<view style="width: 654rpx; margin-top: 10rpx;display: flex;justify-content: flex-end;">
					<text style="font-size: 50rpx;margin-right: 41rpx;align-self: flex-end;line-height: 50rpx;">￥{{ item.price }}</text>
					<text style="font-size: 30rpx;align-self: flex-end;line-height: 30rpx;">{{ item.limit }}</text>
				</view>
				<image v-if="item.statu != 0" mode="aspectFill" src="../static/guoqi.png" style="position: absolute;width: 146rpx;height: 146rpx;right: 48rpx;"></image>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			cardList: [],
			cardAvailable:
				'background: url(../static/back.png);width: 702rpx;height: 170rpx;margin-top: 30rpx; background-size: cover;display: flex;flex-direction: column;align-items: center;color: #FFFFFF;',
			cardNoAvailable:
				'background: url(../static/backGuoqi.png);width: 702rpx;height: 170rpx;margin-top: 30rpx; background-size: cover;display: flex;flex-direction: column;align-items: center;color: #B3B3B3;',
		};
	},
	onLoad() {
		this.getData();
	},
	methods: {
		lower() {
			console.log('页面滚动到底部了');
		},
		//获取优惠券数据
		async getData() {
			let res;
			try {
				res = await this.$request.post('api/User/voucher_list', {
					data: {
						uid: 3,
						page: 1,
						pagesize: 10,
					},
				});
			} catch (e) {
				//TODO handle the exception
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}
			let resList = res.data.data;
			console.log(resList);
			if (resList.length > 0) {
				for (let i = 0; i < resList.length; i++) {
					if (resList[i].status != 1) {
						this.cardList.push({
							id: resList[i].id,
							time: resList[i].scope,
							price: resList[i].price,
							type: resList[i].name,
							limit: '用于抵扣现金',
							statu: resList[i].status,
						});
					}
				}
			}
		},
	},
};
</script>

<style></style>
